<template>
  <el-backtop :bottom="100" style="width: 54px;height: 54px;">
    <div
        style="
        padding-top: 18px;
        height: 75%;
        width: 100%;
        background-color: #00c792;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
      "
    >
      <img src="../../assets/向上箭头.png" style="width: 30px;height: 25px;">
    </div>
  </el-backtop>
  <div class="detailBody">
    <br><br>
    <el-card class="bodyInfo">
      <span style="color: #b38c3e;"><img src="../../assets/评审.png" style="width: 30px;height: 30px;float: left;">丁香医生审稿专业委员会同行评议通过</span>
      <br/> <br/><br/>
      <h1>{{ healthInfo.health_info.title }}</h1>
      <br/> <br/>
      <span>{{ healthInfo.health_info.create_date }}</span>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span>作者：{{ healthInfo.health_info.author }}</span>
      <br/> <br/>
      <div class="info" v-html="healthInfo.health_info.content">
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import healthDetail from "../../api/healthDetail.js";
import healthInfo from "../../api/healthInfo.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute()
onMounted(()=>{
  healthInfo.id = route.query.id
  if (healthDetail.type_id == 1){
    console.log("健康")
    healthInfo.get_health_info_by_id()
  } else if (healthDetail.type_id == 2) {
    console.log("生活")
    healthInfo.get_life_info_by_id()
  }

  // const div = document.getElementById('detailBody');
  // div.style.height = div.scrollHeight + 'px';
})


</script>

<style scoped>
.detailBody{
  /*height: 3000px;*/
  width: 100%;
  height: 100%;
  margin-top: 150px;
  background-color: #f2f3f5;
}
.bodyInfo{
  margin-left: 250px;
  padding: 24px 24px 24px 24px;
  width: 65%;
  /*height: 100%;*/
  background-color: white;
}
.info{
  width: 100%;
  height: 100%;
  background-color: white;
}

</style>